<template>
  <div ref="code" class="container article-detail grid-container">
    <div class="markdown-body flex1" v-html="data.content"></div>
    <page-aside :tags="tags"></page-aside>
  </div>
</template>

<script>
import hljs from 'highlight.js'
import { mapState } from 'vuex'

import request from '~/assets/request'
import PageAside from '~/components/pageAside'

export default {
  name: 'notebook',
  head() {
    return {
      title: '操作手册'
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['tags'])
  },
  async asyncData() {
    const { data } = await request({
      url: `/api/article/58`
    })
    return { data }
  },
  async fetch({ store }) {
    await store.dispatch('fetchTags')
  },
  components: {
    PageAside
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const blocks = this.$refs.code.querySelectorAll('pre code');
      blocks.forEach((block, num) => {
        hljs.highlightBlock(block)
        let i = 1
        const n = (m) => `<em class="line-label">${m > 9 ? m : '0' + m}</em>`
        block.innerHTML = `<div class="line">${n(i)}${block.innerHTML.replace(/\n/g, function (word) {
          i += 1
          return `</div><div class="line">${n(i)}`
        })}</div>`
      })
    }
  }
}
</script>

<style lang="scss">
@import "../detail/highlight.css";
@import "../detail/markdown.css";
</style>
